<template>
    <div class="screen-container" :style="bgcColor">
        <div class="header" :style="titleColor">
            <div class="backBorder">
                <img :src="borderSrc" alt="">
            </div>
            <header>
                <div class="logo">
                    <!-- <img :src="logoSrc" alt=""> -->
                    logo占位区
                </div>
                <div class="title" :style="titleStyle">
                    大数据可视化看板平台
                </div>
                <div class="toolbar">
                    <span @click="handleChangeTheme"><img :src="changeSrc" alt=""></span>
                    <span>{{curTime}}</span>
                </div>
            </header>
        </div>
        <div class="mainBody">
            <div class="leftMain">
                <div class="box1" :class="[fullScreenStatus.trender ? 'fullScreen' : '']">
                    <!-- 销量趋势图表 -->
                    <Trender ref="trender"></Trender>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('trender')"
                            :class="['iconfont',fullScreenStatus.trender ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
                <div class="box2" :class="[fullScreenStatus.seller ? 'fullScreen' : '']">
                    <!-- 商家销售金额图表 -->
                    <Seller ref="seller"></Seller>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('seller')"
                            :class="['iconfont',fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
            </div>
            <div class="middleMain">
                <div :class="['box1',fullScreenStatus.map ? 'fullScreen' : '']">
                    <!-- 商家分布图表 -->
                    <Map ref="map"></Map>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('map')"
                            :class="['iconfont',fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
                <div :class="['box2',fullScreenStatus.rank ? 'fullScreen' : '']">
                    <!-- 地区销量排行图表 -->
                    <Rank ref="rank"></Rank>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('rank')"
                            :class="['iconfont',fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
            </div>
            <div class="rightMain">
                <div class="box1" :class="[fullScreenStatus.hot ? 'fullScreen' : '']">
                    <!-- 热销商品占比图表 -->
                    <Hot ref="hot"></Hot>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('hot')"
                            :class="['iconfont',fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
                <div class="box2" :class="[fullScreenStatus.stock ? 'fullScreen' : '']">
                    <!-- 库存销量分析图表 -->
                    <Stock ref="stock"></Stock>
                    <!-- 切换按钮 -->
                    <div class="resize" :style="titleColor">
                        <span @click="changeStatus('stock')"
                            :class="['iconfont',fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Trender from '@/components/trender.vue';
import Seller from '@/components/seller.vue';
import Map from '@/components/map.vue';
import Rank from '@/components/rank.vue';
import Hot from '@/components/hot.vue';
import Stock from '@/components/stock.vue';
import { mapState } from 'vuex';
import { getTheme } from '@/utils/theme_utils';

export default {
    // 组件名称
    name: "screenPage",
    data() {
        return {
            fullScreenStatus: {
                trender: false,
                seller: false,
                map: false,
                rank: false,
                hot: false,
                stock: false,
            },
            timeID: null,
            curTime: '',
        }
    },
    components: { Trender, Seller, Map, Rank, Hot, Stock },
    created() {
        this.$scoket.registerCallBack('fullScreen', this.recvDataFn)
        this.$scoket.registerCallBack('themeChange', this.changeThemeFn)
        this.getDate()

    },
    mounted() {
        // this.getDate()
    },
    destroyed() {
        this.$scoket.unregisterCallBack('fullScreen')
    },
    methods: {
        changeStatus(chart) {
            // 普通单端
            // this.fullScreenStatus[chart] = !this.fullScreenStatus[chart]
            // this.$nextTick(() => {
            //     this.$refs[chart].adapter()
            //     this.$refs[chart].adapter()
            // })

            // 多端联动实现同步切换全屏 
            const curStatus = !this.fullScreenStatus[chart]
            this.$scoket.send({
                action: 'fullScreen',
                socketType: 'fullScreen',
                chartName: chart,
                value: curStatus

            })
        },
        recvDataFn(data) {
            const chart = data.chartName
            const targetValue = data.value
            this.fullScreenStatus[chart] = targetValue
            this.$nextTick(() => {
                this.$refs[chart].adapter()
                this.$refs[chart].adapter()
            })
        },
        handleChangeTheme() {
            this.$scoket.send({
                action: 'themeChange',
                socketType: 'themeChange',
                value: ''
            })
        },
        changeThemeFn() {
            this.$store.commit('themeChange')
        },
        getDate() {
            if (this.timeID) {
                clearTimeout(this.timeID)
            }
            this.timeID = setInterval(() => {
                let month = new Date().getMonth() + 1
                let day = new Date().getDate()
                let hour = new Date().getHours()
                let minute = new Date().getMinutes() > 10 ? new Date().getMinutes() : '0' + new Date().getMinutes()
                let second = new Date().getSeconds() > 10 ? new Date().getSeconds() : '0' + new Date().getSeconds()
                this.curTime = `${month}月${day}日 ${hour}:${minute}:${second}`
            }, 1000)
        },
    },
    computed: {
        logoSrc() {
            return '/static/img/' + getTheme(this.theme).logoSrc
        },
        changeSrc() {
            return '/static/img/' + getTheme(this.theme).changeSrc
        },
        borderSrc() {
            return '/static/img/' + getTheme(this.theme).borderSrc
        },
        bgcColor() {
            return {
                backgroundColor: getTheme(this.theme).backgroundColor
            }
        },
        titleColor() {
            return {
                color: getTheme(this.theme).titleColor
            }
        },
        titleStyle() {
            const titleFontSize = document.body.clientWidth / 100 * 1.9
            return {
                fontSize: titleFontSize + 'px'
            }
        },
        ...mapState(['theme']),
    }
}
</script> 

<style scoped lang='less'>
.fullScreen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 99;
}

.screen-container {
    height: 100%;
    width: 100%;
    overflow: auto;
}

header {
    width: 100%;
    height: 72px;
    position: relative;

    .logo {
        height: 50%;
        width: 200px;
        margin-left: 30px;
        border: 1px solid wheat;
        position: absolute;
        display: flex;
        justify-content: space-around;
        align-items: center;
        left: 5%;
        top: 10%;

        img {
            height: 100%;
            width: 100%;
            object-fit: fill;
        }
    }

    .toolbar {
        width: 300px;
        margin-top: 10px;
        margin-right: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        right: 5%;
        top: 10%;
        z-index: 9;

        img {
            width: 70%;
            object-fit: fill;
            cursor: pointer;
        }

        span {
            font-size: larger;
            font-weight: 700;
        }
    }

    .title {
        font-weight: 700;
        text-align: center;
        position: absolute;
        top: 25%;
        left: 40%;
    }
}

.backBorder {
    height: 72px;
    width: 100%;
    overflow: hidden;
    float: left;

    img {
        min-height: 100%;
        width: 100%;
    }
}

.mainBody {
    height: 95%;
    display: flex;
    margin-top: 30px;
    width: 100%;

    .leftMain {
        flex: 1;
        height: 100%;
        width: 100%;
        margin-right: 10px;
        margin-left: 20px;

        .box1 {
            height: 60%;
            width: 100%;
            position: relative;
        }

        .box2 {
            margin-top: 10px;
            height: 35%;
            width: 100%;
            position: relative;
        }
    }

    .middleMain {
        width: 100%;
        height: 100%;
        flex: 1;
        margin-right: 10px;

        .box1 {
            height: 65%;
            width: 100%;
            position: relative;
        }

        .box2 {
            margin-top: 10px;
            height: 30%;
            width: 100%;
            position: relative;
        }
    }

    .rightMain {
        width: 100%;
        height: 100%;
        flex: 1;
        margin-right: 20px;

        .box1 {
            height: 50%;
            width: 100%;
            position: relative;
        }

        .box2 {
            margin-top: 10px;
            height: 45%;
            width: 100%;
            position: relative;
        }
    }
}

.resize {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 20px;
    top: 15px;
    cursor: pointer;
    color: aliceblue;
}
</style>
